<script setup>
import { ref } from 'vue'
import api from '@/api'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'

const $route = useRoute()
const $router = useRouter()

const props = defineProps(['customId'])
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  administrators_id: null,
  name: '',
  username: '',
  password: '',
})

const getAdministratorsList = async (page) => {
  try {
    const res = await api.get('custom/administratorsList/' + props.customId, {
      params: {
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}

const showModifyForm = async (record) => {
  if (record) {
    formData.value.administrators_id = record.id
    formData.value.name = record.name
    formData.value.username = record.username
  } else {
    resetFormData()
  }
  formVisible.value = true
}

const formSubmit = async () => {
  console.log('formData', formData.value)
  var obj = { ...formData.value }
  if (!obj.name) {
    Message.error('姓名不可为空')
    return false
  }
  if (!obj.username) {
    Message.error('登录账号不可为空')
    return false
  }
  if (obj.administrators_id) {
    try {
      const res = await api.post(
        'custom/updateAdministrators/' + props.customId,
        obj
      )
      Message.success(res.message)
      formVisible.value = false
      getAdministratorsList(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  } else {
    try {
      const res = await api.post(
        'custom/createAdministrators/' + props.customId,
        obj
      )
      Message.success(res.message)
      formVisible.value = false
      getAdministratorsList(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
}

const resetFormData = async () => {
  formData.value = {
    administrators_id: null,
    name: '',
    username: '',
    password: '',
  }
}

defineExpose({
  getAdministratorsList,
})
</script>

<template>
  <div>
    <div class="mb15 flex jc_e">
      <a-button @click="showModifyForm()"
                type="primary">新增超管账号</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getAdministratorsList"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="姓名"
                        data-index="name"></a-table-column>
        <a-table-column title="登录账号"
                        data-index="username"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <!-- <a-popconfirm @ok="deleteData(record)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm> -->
              <a-button @click="showModifyForm(record)"
                        type="primary"
                        size="mini">编辑</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal :title="formData.administrators_id ? '编辑超管':'新增超管'"
             width="600px"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form>
        <a-form-item label="姓名">
          <a-input v-model="formData.name"
                   :style="{ width: '400px' }"
                   placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="登录账号">
          <a-input v-model="formData.username"
                   :style="{ width: '400px' }"
                   placeholder="请输入登录账号" />
        </a-form-item>
        <a-form-item label="登录密码">
          <a-input v-model="formData.password"
                   :style="{ width: '400px' }"
                   :placeholder="formData.administrators_id ? '不输入则为不修改密码' : '请输入密码'" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>